<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box {
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function() {
				
				var box = document.getElementById("box");
				var btn = document.getElementById("btn");
				btn.onclick = function() {
		
					// currentStyle只有IE浏览器支持，其他的浏览器都不支持
					// console.log(box.currentStyle.width);
					
					/*
					 * 在其他浏览器中可以使用window.getComputedStyle()方法
					 * 
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都传null
					 * 
					 * 但是该方法不支持IE8及以下的浏览器
					 * 
					 */

					// console.log(getComputedStyle(box, null).width);
					
					console.log(getStyle(box, "width"));
					console.log(getStyle(box, "backgroundColor"));
				};
			};
			

			// 兼容处理
			function getStyle(obj, prop) {
				if (window.getComputedStyle) {
					return getComputedStyle(obj, null)[prop];
				} else {
					// IE8 不支持getComputedStyle()方法
					return obj.currentStyle[prop];
				}

				// return window.getComputedStyle ? getComputedStyle(obj, null)[prop] : obj.currentStyle[prop];
			}
			
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
		<br /><br />
		<div id="box"></div>
	</body>
</html>
